GridCore: add methods to HeaderPanel to add/remove toolbar items by anna-shakhova · Pull Request #33118 · DevExpress/DevExtreme

anna-shakhova · 2026-04-01T12:22:07Z

No description provided.

Copilot

Pull request overview

This PR introduces a mechanism for dynamically managing GridCore header panel toolbar items by adding explicit addToolbarItem / removeToolbarItem APIs on HeaderPanel, and refactors the search panel integration to use these APIs (via a new controller) instead of extending HeaderPanel directly.

Changes:

Added HeaderPanel.addToolbarItem() / removeToolbarItem() with centralized sorting by sortIndex.
Refactored the search panel toolbar integration into SearchPanelViewController that registers/unregisters the search toolbar item on option changes.
Updated/added tests (QUnit + Jest integration) and adjusted related typing for toolbar items.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/keyboardNavigation.keyboardKeys.tests.js	Adjusts test setup ordering for searchPanel options before module initialization.
packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/headerPanel.tests.js	Switches tests to use `this.option('searchPanel', ...)` instead of mutating `this.options.searchPanel`.
packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/gridView.tests.js	Refactors one test’s grid creation/render flow; currently includes a stray `debugger`.
packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js	Removes an assertion that toolbar recomputation happens on `searchPanel` option changes.
packages/devextreme/js/__internal/grids/new/grid_core/toolbar/utils.ts	Formatting-only change to the types import.
packages/devextreme/js/__internal/grids/new/grid_core/toolbar/types.ts	Extends toolbar item typing with `sortIndex` and `onItemRendered`.
packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts	Introduces `SearchPanelViewController` and registers/unregisters the search toolbar item dynamically.
packages/devextreme/js/__internal/grids/grid_core/search/tests/m_search.integration.test.ts	New Jest integration tests covering searchPanel runtime option changes without headerPanel invalidation.
packages/devextreme/js/__internal/grids/grid_core/m_types.ts	Adds `searchPanel` to the controllers typing map.
packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts	Routes Ctrl+F focus behavior through the new `searchPanel` controller.
packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts	Implements toolbar item registry + sorting, and wires `onItemRendered` passthrough.
packages/devextreme/js/__internal/grids/grid_core/header_panel/tests/m_header_panel.integration.test.ts	New Jest integration tests for the new headerPanel toolbar item registry APIs.
packages/devextreme/js/__internal/grids/grid_core/filter/m_filter_row.ts	Updates typing of headerPanel toolbar items to the shared `ToolbarItem` type.
packages/devextreme/js/__internal/grids/data_grid/export/m_export.ts	Removes local sort helper, relying on headerPanel’s centralized sorting.

packages/devextreme/testing/tests/DevExpress.ui.widgets.dataGrid/gridView.tests.js

packages/devextreme/js/__internal/grids/new/grid_core/toolbar/types.ts

packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts

packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts:165

SearchPanelViewController.optionChanged only reacts to searchPanel.text and searchPanel.visible, but it marks all searchPanel* changes as handled. This breaks common update paths like option('searchPanel', { visible: true, ... }) (fullName === 'searchPanel') because the controller won't register/unregister the toolbar item, so the search panel never appears/disappears. It also prevents runtime updates to placeholder/width when visible. Consider handling fullName === 'searchPanel' (and other relevant searchPanel.* options) by updating/re-registering the toolbar item and/or updating the existing TextBox instance when already visible.

  public optionChanged(args: OptionChanged): void {
    if (args.name === 'searchPanel') {
      if (args.fullName === 'searchPanel.text') {
        const editor = this.getSearchTextEditor();
        if (editor) {
          editor.option('value', args.value);
        }
      }

      if (args.fullName === 'searchPanel.visible') {
        this._updateSearchPanelItem();
      }

      args.handled = true;
    } else {

packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts

Copilot

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 1 comment.

packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts

packages/devextreme/js/__internal/grids/grid_core/keyboard_navigation/m_keyboard_navigation.ts

Alyar666 · 2026-04-06T09:21:42Z

packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts

+    this._registeredToolbarItems.set(name, { ...item, name });
+
+    if (this._$element) {
+      this._invalidate();


Why do we need to call the _invalidate method here? This method is only used in optionChanged.

Agree, not necessary to redraw the whole headerPanel when we just update some property of button/editor
replaced it with more complex logic - of item already exists, we just update its options, otherwise redraw header panel to add item

Alyar666 · 2026-04-06T09:21:55Z

packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts

+      this._registeredToolbarItems.delete(name);
+
+      if (this._$element) {
+        this._invalidate();


Why do we need to call the _invalidate method here? This method is only used in optionChanged.

we need it there to redraw toolbar after item remove, the 1st line just removes item from registered but do not update headerPanel state

packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts

Alyar666 · 2026-04-06T09:30:55Z

packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts

+    if (this._headerPanel && searchPanelOptions && searchPanelOptions.visible) {
+      return {
+        template: (data, index, container: dxElementWrapper | Element): void => {
+          if (this._headerPanel) {


This also seems redundant. If we’re not sure whether _headerPanel exists somewhere, we can use the optional chaining operator (?.) where needed.

I prefer keep it here to ensure we append template to existing headerPanel (not before 1st render)
Also this way it is cleaner than multiple ? and skip-errors

packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts

anna-shakhova · 2026-04-06T11:14:57Z

packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts


-    return items;
-  }
+    if (!this.headerPanel || !$element) {


kept check here for cleaner TS checks

anna-shakhova self-assigned this Apr 1, 2026

anna-shakhova added the 26_1 label Apr 1, 2026

anna-shakhova closed this Apr 1, 2026

anna-shakhova added the skip-cache label Apr 1, 2026

anna-shakhova reopened this Apr 1, 2026

anna-shakhova force-pushed the 26_1__header_panel_add_remove_item branch 2 times, most recently from a88207d to e6e56e6 Compare April 1, 2026 14:15

anna-shakhova closed this Apr 2, 2026

anna-shakhova added the force all tests label Apr 2, 2026

anna-shakhova reopened this Apr 2, 2026

anna-shakhova marked this pull request as ready for review April 2, 2026 10:22

anna-shakhova requested a review from a team as a code owner April 2, 2026 10:22

Copilot AI review requested due to automatic review settings April 2, 2026 10:22

Copilot started reviewing on behalf of anna-shakhova April 2, 2026 10:23 View session

Copilot AI reviewed Apr 2, 2026

View reviewed changes

anna-shakhova force-pushed the 26_1__header_panel_add_remove_item branch from 06979b3 to 39dc044 Compare April 2, 2026 12:20

Copilot AI review requested due to automatic review settings April 3, 2026 09:24

Copilot started reviewing on behalf of anna-shakhova April 3, 2026 09:25 View session

Copilot AI reviewed Apr 3, 2026

View reviewed changes

packages/devextreme/js/__internal/grids/grid_core/header_panel/m_header_panel.ts Outdated Show resolved Hide resolved

Copilot AI review requested due to automatic review settings April 3, 2026 09:56

anna-shakhova force-pushed the 26_1__header_panel_add_remove_item branch from f6f7cd9 to a437a97 Compare April 3, 2026 09:56

Copilot started reviewing on behalf of anna-shakhova April 3, 2026 09:56 View session

Copilot AI reviewed Apr 3, 2026

View reviewed changes

packages/devextreme/js/__internal/grids/grid_core/search/m_search.ts Outdated Show resolved Hide resolved

anna-shakhova added 6 commits April 6, 2026 11:30

GridCore: add methods to HeaderPanel to add/remove toolbar items

d655367

GridCore: fix tests

8f3e1b4

GridCore: fix tests

0714870

GridCore: add tests for new functionality

1d4c490

GridCore: call _updateSearchPanelItem on visibility change only

6a16b59

GridCore: rename some methods for clarity

866069b

Alyar666 requested changes Apr 6, 2026

View reviewed changes

do not invalidate header panel on visible item option changed

731ff8c

anna-shakhova force-pushed the 26_1__header_panel_add_remove_item branch from a437a97 to 731ff8c Compare April 6, 2026 11:00

anna-shakhova commented Apr 6, 2026

View reviewed changes

Alyar666 approved these changes Apr 6, 2026

View reviewed changes

Conversation

anna-shakhova commented Apr 1, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Alyar666 Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

anna-shakhova Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Alyar666 Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

anna-shakhova Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Alyar666 Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

anna-shakhova Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

anna-shakhova Apr 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants